文章目录
  1. 1. 准备工作
    1. 1.1. 了解 Hexo
    2. 1.2. 安装 GitHub Windows
    3. 1.3. 安装 Node.JS
    4. 1.4. 安装 Hexo
  2. 2. Hexo 初始化
    1. 2.1. 创建 Hexo 文件夹
    2. 2.2. 安装 Hexo 插件
    3. 2.3. 查看本地效果
  3. 3. 部署静态网页到 GitHub
    1. 3.1. 注册设置 GitHub
    2. 3.2. 同步内容至 GitHub
    3. 3.3. 查看效果

准备工作

了解 Hexo

Hexo是一个快速、简洁且高效的博客框架。Hexo使用Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

安装 GitHub Windows

安装 Node.JS

安装 Hexo

双击桌面上的Git Shell,输入npm命令即可安装

1
2
npm install hexo-cli -g
npm install hexo --save

Hexo 初始化

创建 Hexo 文件夹

根据自己喜好建立目录(如E:\kuaipan\GitHub\hexo),进入Git Shell切换到该路径下E:\kuaipan\GitHub\hexo执行以下指令

1
2
hexo init
npm install

安装 Hexo 插件

1
2
3
4
5
6
7
8
9
10
11
12
13
npm install hexo-generator-index --save
npm install hexo-generator-archive --save
npm install hexo-generator-category --save
npm install hexo-generator-tag --save
npm install hexo-server --save
npm install hexo-deployer-git --save
npm install hexo-deployer-heroku --save
npm install hexo-deployer-rsync --save
npm install hexo-deployer-openshift --save
npm install hexo-renderer-marked@0.2 --save
npm install hexo-renderer-stylus@0.2 --save
npm install hexo-generator-feed@1 --save
npm install hexo-generator-sitemap@1 --save

查看本地效果

继续执行以下命令,成功后可登录localhost:4000查看效果

1
hexo s

部署静态网页到 GitHub

注册设置 GitHub

  • 登录GitHub,注册自定义用户名如leeguoren
  • 在主页右下角创建New repositoryname必须和用户名一致如leeguoren.github.io
  • 首次创建耐心等待 10 分钟左右审核,之后即可访问静态主页如http://leeguoren.github.io

同步内容至 GitHub

编辑E:\kuaipan\GitHub\hexo下的_config.yml文件,建议使用Sublime Text。在_config.yml最下方,添加如下配置(要把repository的用户名修改成自己的)

1
2
3
4
deploy: 
type: git
repository: https://github.com/leeguoren/leeguoren.github.io.git
branch: master

然后在Git Shell中输入如下命令

1
2
hexo g
hexo d

查看效果

在浏览器访问leeguoren.github.io就能看到自己的博客了。第一次访问刚地址,可能访问不了,您可以在几分钟后进行访问,一般不超过 10 分钟。

文章目录
  1. 1. 准备工作
    1. 1.1. 了解 Hexo
    2. 1.2. 安装 GitHub Windows
    3. 1.3. 安装 Node.JS
    4. 1.4. 安装 Hexo
  2. 2. Hexo 初始化
    1. 2.1. 创建 Hexo 文件夹
    2. 2.2. 安装 Hexo 插件
    3. 2.3. 查看本地效果
  3. 3. 部署静态网页到 GitHub
    1. 3.1. 注册设置 GitHub
    2. 3.2. 同步内容至 GitHub
    3. 3.3. 查看效果